<template>
  <div id="goods_id">
    <!-- 上层注释以及添加按钮 -->
    <div class="goods_id_top">
      <div class="goods_id_left">
        注：<br />
        1.增加的新栏目为当前栏目的下一行<br />
        2.修改完的栏目一行需要后提交审批才能生效
      </div>
      <div class="goods_id_right">
        <el-button round @click="xianshi">增加</el-button>
      </div>
    </div>
    <!-- 下层渲染 -->
    <el-table :data="goods_list" border style="width: 100%; margin-top: 20px">
      <el-table-column
        fixed
        prop="id"
        label="编号"
        width="100"
        style="text-align: center"
      ></el-table-column>
      <el-table-column prop="firstcatename" label="一级分类" width="120">
      </el-table-column>
      <el-table-column prop="secondcatename" label="二级分类" width="120">
      </el-table-column>
      <el-table-column prop="goodsname" label="商品名称" width="120">
      </el-table-column>
      <el-table-column prop="img" label="商品图片" width="150" v-slot="$props">
        <template>
          <el-image
            :src="lujing + $props.row.img"
            alt=""
            style="height: 100px"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="零售价格" width="120">
      </el-table-column>
      <el-table-column prop="market_price" label="市场价格" width="120">
      </el-table-column>
      <el-table-column prop="isnew" label="是否新品" width="120" v-slot="$new">
        <template>
          <el-switch
            v-model="$new.row.isnew"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖" width="120" v-slot="$hot">
        <template>
          <el-switch
            v-model="$hot.row.ishot"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120" v-slot="$status">
        <template>
          <el-button type="success" size="mini" v-if="$status.row.status == 1"
            >正常</el-button
          >
          <el-button type="danger" size="mini" v-if="$status.row.status == 0"
            >禁用</el-button
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" v-slot="$shuju">
        <template>
          <el-button
            type="success"
            size="mini"
            round
            @click="xiugai($shuju.row)"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="mini"
            round
            @click="shanchu($shuju.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 页数 -->
    <el-pagination
      background
      :page-size="pagesize"
      layout="prev, pager, next"
      :total="zhongshu"
      @current-change="changegoods"
      style="text-align: center"
    >
    </el-pagination>
    <addgoods :isShow="isShow" @chongqi="chongqi" ref="addgoodsxiugai"> </addgoods>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import addgoods from "../components/addgoods.vue";
export default {
  data() {
    return {
      page: 1,
      pagesize: 5,
      isShow: { sta: false },
    };
  },
  created() {
    this.GoodsActions();
    this.GoodsZhongshu();
  },
  computed: {
    ...mapState({
      goods_list: (state) => state.GoodsStore.goods_list,
      zhongshu: (state) => state.GoodsStore.zhongshu,
    }),
  },
  methods: {
    xiugai(obj) {
      delete obj.firstcatename;
      delete obj.secondcatename;
      this.$refs.addgoodsxiugai.xiugailist(obj)
      this.isShow.sta=true
    },
    shanchu(id) {
      this.$http.post("/api/goodsdelete", { id }).then((res) => {
        if (res.code == 200) {
          alert("删除成功");
          this.GoodsActions();
          this.GoodsZhongshu({ page: this.page, size: this.pagesize });
        }
      });
    },
    xianshi() {
      this.isShow.sta = true;
    },
    changegoods(page) {
      this.page = page;
      this.GoodsActions({ page: this.page, size: this.pagesize });
    },
    chongqi() {
      this.GoodsActions();
      this.GoodsZhongshu({ page: this.page, size: this.pagesize });
    },
    ...mapActions("GoodsStore", ["GoodsActions", "GoodsZhongshu"]),
  },
  components: {
    addgoods,
  },
};
</script>

<style>
#goods_id .goods_id_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#goods_id .goods_id_top .goods_id_left {
  font-size: 12px;
  color: #c4c4c4;
}
#goods_id .goods_id_top .goods_id_right button {
  height: 10px;
  line-height: 2px;
  font-size: 12px;
  color: #ffa998;
}
</style>